<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-select class="w-ipt" v-model="type" @change="typeChange" placeholder="请选择方向" size="medium">
						<el-option v-for="(item, index) in type_list" :label="item.name" :value="item.value"
							:key="index"></el-option>
					</el-select>
				</div>
			</template>
			<template #add>
				<!-- <div class="opt-item">
					<el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加房间
					</el-button>
				</div> -->
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column prop="uuid" label="uuid" align="center"></el-table-column>
				<el-table-column prop="type" label="类型" align="center">
					<template #default="scope">
						<span>{{ scope.row.type == 1 ? 'log' : 'exception' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="logCat" label="内容" align="center" width="600">
					<template #default="scope">
						<el-row :gutter="10">
							<el-col :span="16">
								<div class="logcat">{{scope.row.logCat}} </div>
							</el-col>
							<el-col :span="2">
								<el-popover placement="left" width="300" trigger="click">
									<el-input type="textarea" v-model="scope.row.logCat" rows="6" style="width: 600px;">
									</el-input>
									<template #reference>
										<el-button type="info" plain size="mini">查看更多
										</el-button>
									</template>
								</el-popover>
							</el-col>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="时间" align="center"></el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>
	<div class="mobile-wrap">
		<div class="mobile-search-vertical">
			<el-select class="w-ipt" v-model="type" @change="typeChange" placeholder="请选择方向" size="medium">
				<el-option v-for="(item, index) in type_list" :label="item.name" :value="item.value" :key="index">
				</el-option>
			</el-select>
		</div>
		<div class="moblie-table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="uuid" label="uuid"></el-table-column>
				<el-table-column prop="type" label="类型">
					<template #default="scope">
						<span>{{ scope.row.type == 1 ? 'log' : 'exception' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="时间"></el-table-column>
				<el-table-column prop="logCat" label="内容">
					<template #default="scope">
						<el-popover placement="left" width="300" trigger="click">
							<el-input type="textarea" v-model="scope.row.logCat" rows="6" style="width: 300px;">
							</el-input>
							<template #reference>
								<el-button type="info" plain size="mini">查看内容
								</el-button>
							</template>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'

	export default {
		name: "device-logs",
		mixins: [mixin],
		data() {
			return {
				type_list: [{
					value: '1',
					name: 'log'
				}, {
					value: '2',
					name: 'exception'
				}],
				type: ''
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						uuid: localStorage.getItem('device_uuid') ? localStorage.getItem('device_uuid') : '',
						type: self.type ? self.type : '0',
					}
					self.addPageInfo(params)
					let res = await API.deviceLogs(params.pageNumber, params.pageSize, params.uuid, params.type)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},
			typeChange() {
				this.getSearchData();
			}
		}
	}
</script>

<style scoped>
	.logcat {
		text-align: left;
		/* width: 300px; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
